<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<h3>等宽列布局</h3>
			<div class="row">
				<div class="col border py-3 bg-success text-center">二分之一</div>
				<div class="col border py-3 bg-success text-center">二分之一</div>
			</div>
			<div class="row">
				<div class="col border py-3 bg-info text-center">三分之一</div>
				<div class="col border py-3 bg-info text-center">三分之一</div>
				<div class="col border py-3 bg-info text-center">三分之一</div>
			</div>
			<div class="row">
				<div class="col border py-3 bg-warning text-center">四分之一</div>
				<div class="col border py-3 bg-warning text-center">四分之一</div>
				<div class="col border py-3 bg-warning text-center">四分之一</div>
				<div class="col border py-3 bg-warning text-center">四分之一</div>
			</div>
			<div class="row">
				<!-- 批量修改:选中需修改的元素,然后按住ctrl键盘,(双击/鼠标选中)其他需要批量修改的元素 -->
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				<div class="col border py-3 bg-primary text-center">十二分之一</div>
				
			</div>
		</div>
		<div class="container">
			<h3>等宽多行布局</h3>
			<div class="row">
				<div class="col border bg-info py-3">col</div>
				<div class="col border bg-info py-3">col</div>
				<div class="w-100"></div>
				<div class="col border bg-info py-3">col</div>
				<div class="col border bg-info py-3">col</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<!-- col-8代表12列中占8列 -->
				<div class="col border py-3 bg-warning ">col</div>
				<div class="col-8 border py-3 bg-warning ">col</div>
				<div class="col border py-3 bg-warning ">col</div>
			</div>
		</div>
	</body>
</html>
